<template>
  <div class="add-record">
    <header>
      <!-- <div class="state"></div> -->
      <div class="nav">
        <div @click="goBack">
          <img src="../assets/goback.svg" alt />
        </div>
        <div>
          <p v-if="scene == 0">添加记录</p>
          <p v-if="scene == 1">修改记录</p>
        </div>

        <div v-if="msg == 0" @click="NoteDetail()">
          <p>完成</p>
        </div>

        <div v-if="msg == 1" class="loading1">
          <div>
            <div class="demo1"></div>
            <div class="demo1"></div>
            <div class="demo1"></div>
          </div>
        </div>

        <div v-if="msg == 2">
          <img src="../assets/good.svg" alt />
        </div>
      </div>
    </header>

    <main>
      <div class="switch-tag">
        <p>标签</p>
        <div class="input-tag tag">
          <div class="tag">
            <span
              v-for="(item, index) in tag"
              :key="index"
              @click="remove(index) "
              :style="{'backgroundColor':item.color}"
            >{{item.title}}</span>
          </div>
          <textarea placeholder="输入标签文字" v-model="tag_temporary.title" name id maxlength="5"></textarea>
        </div>
        <div class="tag-color">
          <ul>
            <li
              :key="item"
              v-for="item in tagColor"
              :style="{'backgroundColor':item}"
              @click="generate(item)"
            ></li>
          </ul>
        </div>
        <p>点击颜色生成标签</p>
        <p @click="allTagPopup">选择已有的标签</p>
      </div>

      <AllTag @clicktag="clicktag" v-show="allTag" class="switch-have-tag" />

      <div class="content">
        <textarea placeholder="这里输入记录" name id v-model="content"></textarea>
      </div>
    </main>
  </div>
</template>

<script>
var _self;
import AllTag from "@/components/AllTag.vue";
export default {
  name: "addrecord",
  components: {
    AllTag
  },
  data() {
    return {
      msg: 0,
      tagColor: [
        "#F75953",
        "#F7A448",
        "#F7CE49",
        "#5CCF68",
        "#488FF7",
        "#B472D4",
        "#9D9DA0"
      ],
      noteDetail: [],
      allTag: false,
      tag: [],
      tag_temporary: {
        title: "",
        color: ""
      },
      content: "",
      // 场景值
      scene: ""
    };
  },
  created() {
    const id = this.$route.query.id;
    this.id = this.$route.query.id;

    if (id != null) {
      this.getNoteDetail(id);
      this.scene = 1;
    } else {
      this.scene = 0;
    }
  },
  methods: {
    clicktag(data) {
      this.tag_temporary.title = data.title;
      this.tag_temporary.color = data.color;
      this.tag.push(this.tag_temporary);
      this.tag_temporary = {
        title: "",
        color: ""
      };
      this.allTag = false;
    },
    getNoteDetail(id) {
      if (id == undefined) {
        return false;
      }
      try {
        let res = this.$api.note
          .noteview({
            access_token: localStorage.getItem("access_token"),
            id: id
          })
          .then(res => {
            if (res.error == 0) {
              if (res.data.tag == undefined) {
                this.tag = [];
              } else {
                this.tag = res.data.tag;
              }
              this.content = res.data.content;
            } else {
            }
            layer.open({
              content: res.msg,
              skin: "msg",
              time: 2
            });
            this.noteDetail = res.data;
          });
      } catch (e) {}
    },

    NoteDetail() {
      this.msg = 1;
      if (this.tag.length == 0 || this.content == "") {
        this.msg = 0;
        layer.open({
          content: "缺少标签或内容",
          skin: "msg",
          time: 2
        });
      } else {
        if (this.scene == 0) {
          try {
            let data = {
              access_token: localStorage.getItem("access_token"),
              content: this.content,
              tag: JSON.stringify(this.tag)
            };
            setTimeout(() => {
              this.msg = 2;
            }, 1000);
            this.$api.note.notecreate({}, data).then(res => {
              if (!res.error) {
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
              layer.open({
                content: res.msg,
                skin: "msg",
                time: 2 //2秒后自动关闭
              });
            });
          } catch (e) {}
        }

        if (this.scene == 1) {
          try {
            let data = {
              access_token: localStorage.getItem("access_token"),
              content: this.content,
              tag: JSON.stringify(this.tag),
              id: this.id
            };
            setTimeout(() => {
              this.msg = 2;
            }, 1000);
            this.$api.note.noteupdate({}, data).then(res => {
              if (!res.error) {
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
              layer.open({
                content: res.msg,
                skin: "msg",
                time: 2 //2秒后自动关闭
              });
            });
          } catch (e) {}
        }
      }
    },

    goBack() {
      this.$router.go(-1);
    },
    generate(color) {
      if (this.tag_temporary.title) {
        this.tag_temporary.color = color;
        for (var i in this.tag) {
          if (this.tag[i].title == this.tag_temporary.title) {
            layer.open({
              content: "您已添加过该标签",
              skin: "msg",
              time: 2
            });
            return;
          }
        }
        this.tag.push(this.tag_temporary);
        this.tag_temporary = {
          title: "",
          color: ""
        };
      } else {
        layer.open({
          content: "请输入标签文字后点击颜色生成标签",
          skin: "msg",
          time: 2
        });
      }
    },
    remove(key) {
      this.tag.splice(key, 1);
    },
    allTagPopup() {
      this.allTag ? (this.allTag = false) : (this.allTag = true);
    }
  }
};
</script>

<style lang="less" scoped>
.add-record {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgb(238, 238, 238);
  header {
    width: 100%;
    position: fixed;
    .state {
      height: 25px;
      background-color: rgb(10, 1, 35);
    }
    .nav {
      height: 60px;
      background-color: rgb(10, 1, 35);
      display: flex;
      > div {
        font-size: 1.2rem;
        &:first-of-type img,
        &:last-of-type p {
          position: relative;
          top: 50%;
          transform: translateY(-50%);
        }
        &:first-of-type {
          flex: 1;
          img {
            width: 1.5rem;
            left: 1.4rem;
          }
        }
        &:nth-of-type(2) {
          flex: 2;
          p {
            border: none;
            outline: none;
            width: 6rem;
            color: #fff;
            text-align: center;

            border-radius: 0.2rem;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        &:nth-of-type(3) {
          flex: 1;
          p {
            color: #fff;
            right: -2.4rem;
            font-size: 1rem;
          }
          img {
            width: 1.5rem;
            left: 1.4rem;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translateY(-50%);
          }
        }
        &:last-of-type {
          flex: 1;
          // background: #fff;
          // right: -2.4rem;
          > div {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
  main {
    padding-top: 80px;
    // background-color: rgb(236,236,236);
    .switch-tag {
      width: 100%;
      //   height: 12rem;
      padding: 1rem;
      background-color: #fff;
      .input-tag {
        width: 100%;
        textarea {
          width: 100%;
          //   height: 100%;
          border: none;
          outline: none;
          font-size: 1.4rem;
          padding-top: 0.4rem;
        }
        textarea::-webkit-input-placeholder {
          color: #aaa;
        }
        .tag {
          padding: 0.3rem 0 0 0.3rem;
          span {
            min-height: 2.4rem;
            max-height: 2.4rem;
            line-height: 2.4rem;
            padding: 0 0.7rem;
            margin-right: 0.3rem;
            margin-bottom: 0.3rem;
            font-size: 1rem;
            letter-spacing: 0.05rem;
            color: #fff;
            display: inline-block;
            // background-color: pink;
            border-radius: 0.3rem;
          }
        }
      }
      .tag-color {
        width: 100%;
        height: 2rem;
        background-color: #fff;
        ul {
          display: flex;
          justify-content: space-between;
          li {
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            // &:hover {
            //   border: 1px solid #000;
            // }
          }
        }
      }
      > p {
        color: #000;
        &:first-of-type {
          margin-bottom: 0.5rem;
        }
        &:nth-of-type(2) {
          margin-bottom: 0.5rem;
          font-size: 0.8rem;
          color: #aaa;
        }
        &:last-of-type {
          text-align: center;
          color: #000;
        }
      }
    }
    .switch-have-tag {
      /deep/ .triangle {
        top: 15rem;
      }
      /deep/ .alltag {
        top: 18rem;
        height: 55%;
      }
    }
    .content {
      width: 100%;
      height: 100%;
      padding: 1.4rem 1rem;
      overflow-y: auto;

      textarea {
        width: 100%;
        height: 50vh;
        letter-spacing: 0.1rem;
        // font-size: 0.8rem;
        line-height: 1.6rem;
        font-size: 1.4rem;
        overflow-y: auto;
        border: none;
        outline: none;
        background-color: rgba(0, 0, 0, 0);
      }
    }
  }
}

.demo1 {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 5rem;
  background: #fff;
  float: left;
  margin: 0 0.3rem;
  animation: demo1 linear 1s infinite;
  -webkit-animation: demo1 linear 1s infinite;
}
.demo1:nth-child(1) {
  animation-delay: 0s;
}
.demo1:nth-child(2) {
  animation-delay: 0.15s;
}
.demo1:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes demo1 {
  0%,
  60%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scale(2.5);
  }
}
@-webkit-keyframes demo1 {
  0%,
  60%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scale(2.5);
  }
}
</style>
